<template>
  <div class="personal-page">
    <van-nav-bar title="个人" @click-right="onClickRight()" :border="false" :safe-area-inset-top="true">
      <template #right>
        <van-icon name="chat-o" size="28" color="black" :dot="notices"></van-icon>
      </template>
    </van-nav-bar>

    <van-row type="flex" justify="center" class="personal-data">
      <van-col span="6" class="personal-data-content">
        <van-image
          class="user-avatar"
          round
          width="2rem"
          height="2rem"
          :src="userImage"
        />
      </van-col>
      <van-col span="12" class="personal-data-content">
        <span class="personal-name" v-if="!isLogin"><router-link to="/login">{{ userName }} </router-link></span>
        <span class="personal-name" v-else>{{ userName }}</span>
      </van-col>
      <van-col span="3" class="personal-data-content">
        <router-link to="/setting">
          <van-icon name="setting-o" size="18" color="black"></van-icon>
        </router-link>
      </van-col>
    </van-row>
    <van-row type="flex" justify="center" class="personal-options-bar">
      <van-cell-group inset class="personal-choose-all">
        <router-link tag="div" to="/join">
          <div class="personal-choose ">
            <span>{{ joinCount }}</span>
            <span>我加入的</span>
          </div>
        </router-link>
        <router-link tag="div" to="/started">
          <div class="personal-choose middle">
            <span>{{ initiateCount }}</span>
            <span>我发起的</span>
          </div>
        </router-link>

        <router-link tag="div" to="/winning_record">
          <div class="personal-choose">
            <span>{{ winningCount }}</span>
            <span>中奖记录</span>
          </div>
        </router-link>
      </van-cell-group>
    </van-row>

    <van-row class="cell-all">
      <van-cell-group>
        <van-cell is-link title="收货地址" title-style="margin-left:20px" to="/address_edit">
          <template #icon>
            <van-icon name="https://s4.ax1x.com/2021/12/11/o7IWo8.png" size=".6rem" />
          </template>
        </van-cell>
        <van-cell is-link title="抽奖记录" title-style="margin-left:20px" to="/historical_records">
          <template #icon>
            <van-icon name="https://s4.ax1x.com/2021/12/20/Tn1dht.png" size=".6rem"/>
          </template>
        </van-cell>
        <van-cell is-link title="联系客服" title-style="margin-left:20px" to="/contact">
          <template #icon>
            <van-icon name="https://s4.ax1x.com/2021/12/11/o7IyQA.png" size=".6rem"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-row>
  </div>
</template>

<script>
import {NavBar, Icon, CellGroup, Cell, Toast} from "vant"
import {Col, Row} from "vant"
import {Image as VanImage} from "vant"
import {Grid, GridItem} from "vant"
import {luckInfo} from "@/api/lucky";
export default {
  name: "Psersonal",
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Col.name]: Col,
    [Row.name]: Row,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [CellGroup.name]: CellGroup,
    [Cell.name]: Cell,
    VanImage
  },
  data() {
    return {
      userName: "请先登录",
      userImage: "https://img0.baidu.com/it/u=870760434,3330962666&fm=26&fmt=auto",
      joinCount: 0,
      initiateCount: 0,
      winningCount: 0,
      isLogin: false,
      notices: false
    }
  },
  created: function () {
    this.isLogin = !!this.$store.state.user.token;
    if(this.isLogin){
      const userInfo = this.$store.state.user.userInfo;
      this.userName = userInfo.nickName;
      this.userImage = userInfo.avatarUrl;

      luckInfo().then(res =>{
        this.joinCount = res.data.joins;
        this.initiateCount = res.data.currents;
        this.winningCount = res.data.wins;
        this.notices = res.data.notices !== 0;
      }).catch(err => {
        Toast.fail(err);
      })
    }
  },
  methods: {
    onClickRight() {
      this.$router.push("/notice");
    },
  }
}
</script>

<style lang="less" scoped>
.personal-page {
  background-color: rgb(247, 246, 251);
  font-size: 13px;
  .van-nav-bar{
    background: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  }
  ::v-deep .van-nav-bar__title {
    color: white;
  }
}

.personal-data {
  height: 180px;
  font-weight: 700;
  background-color: #8EC5FC;
  background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
  position: relative;
}

.personal-name {
  margin-left: 1px;
  color: black;
  font-size: 20px;
  font-weight: normal;
}

.personal-data-content {
  display: flex;
  flex-direction: column;
  margin-top: -30px;
  justify-content: center;
  .user-avatar{
    border: 3px solid white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  }

  a {
    color: black;
    font-weight: normal;
  }
}

.personal-options-bar {
  z-index: 2;
  margin-top: -30px;
}

.personal-choose-all {
  display: flex;
  flex-direction: row;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  position: absolute;
  top: 180px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}

.personal-choose {
  padding: 20px;
  width: 70px;
  color: black;
}

.personal-choose {
  > span {
    display: block;
    text-align: center;
    &:nth-child(1){
      color: red;
    }
  }

}

.middle {
  border-left: 1px solid rgb(242, 242, 242);
  border-right: 1px solid rgb(242, 242, 242);
}

.cell-all {
  background-color: white;
  padding-top: 70px;
}
::v-deep .van-cell-group--inset{
  margin: 0;
}
</style>
